<template>
  <div class="tabbar">
    <ul class="item-tabbar">
      <li
        v-for="(item, index) in nameList"
        :key="index"
        :class="{ avtivepage: index === currentIndex}"
        @click="gopage(item,index)">
        <span :class="{ avtiveicon: index === currentIndex}">
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="item.icon" />
          </svg>
        </span>
        <span>{{ item.name }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import { nameList } from "../../assets/js/icon";

export default {
  data() {
    return {
      nameList:nameList,
      currentIndex:0,
    }
  },
  mounted:function(){
    this.currentIndex = this.$session.getItem('currentIndex');
  },
  
  methods: {
    gopage(item,index){
      this.currentIndex  = index;
      this.$session.setItem('currentIndex',this.currentIndex);
      // this.$session.setItem('index',index);
      this.$router.push({ path:item.path });
    }
  },
}
</script>

<style scoped>
.item-tabbar{
  position: fixed;
  width: 100%;
  height: 60px;
  bottom: 0;
  z-index: 1;
  display: flex;
  justify-content: center;
  background-color: #eceae8;
  align-items: center;
  /* padding-bottom: 60px; */
}

.item-tabbar li{
  width: 20%;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 8px;
  color: #959595;
}

.avtivepage {
  color: #d73e39 !important;
}

.activeicon{
  background: linear-gradient(to right, #ff5a4c, #ff1d11);
  color: #ffffff;
  border-radius: 100%;
  min-width: 30px;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
